<template>
  <div class="body">
    <van-sticky>
      <van-nav-bar :title="comic_data.name" left-text="返回" left-arrow @click-left="onClickLeft">

        <template #right>
          <van-icon name="share-o" size="25" @click="showShare = true"/>
        </template>
      </van-nav-bar>
      <div class="box">

        <videoPlayer class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="playerOptions"
                     @play="onPlayerPlay($event)"
                     @pause="onPlayerPause($event)">
        </videoPlayer>
      </div>

      <van-row style="box-shadow: gray 1px 1px 2px 1px;background: white;padding: 5px">
        <van-col span="14">
          <van-tabs v-model="active" swipeable>
            <van-tab v-for="index in ['详情','评论']" :title="index" style="height: 90%;padding-top: 5px">
            </van-tab>
          </van-tabs>
        </van-col>
        <van-col span="10" style="color: white">

        </van-col>
      </van-row>
    </van-sticky>
    <!--     详情-->
    <div v-if="active==0">

      <div style="margin: 5px;">
        <h1>{{ comic_data.name }}</h1>
        <div style="width: 100%;font-size: 12px;">
          <br>
          <span style="font-size: 12px;text-align: right">类型：</span>
          <span v-for=" ind in comic_data.comic_category">{{ type_list[ind - 1] }}&nbsp;&nbsp;</span>
          <span style="color: deepskyblue;font-size: 12px;float:right;" @click="show = true">简介<van-icon
              name="arrow"/></span>
        </div>

        <br>
        <div style="width: 100%;font-size: 14px;">
          <span>选集</span>
          <span style="font-size: 10px;color: #eeeded;float: right;margin-top: 2px;max-height: max-content">
            更新进度{{ comic_data.pub_sections }}/{{ comic_data.sections }}
          </span>
        </div>

        <br>

        <van-button color="#7232dd" v-for="i in comic_data.episodes_list" round style="margin-left: 10px;" @click="playerOptions.sources
[0].src=i.link">{{ i.id }}
        </van-button>

        <van-divider content-position="left"></van-divider>
        <!--        猜你喜欢-->



      </div>
    </div>
    <!--    评论-->
    <div v-else>

      <div v-for="comment in comment_list" style="width: 100%;height: 150px;">
        <div style="margin: 10px;float: left;width: 15%;">
          <el-avatar :src="comment.user_info.icon" style="margin: 5px">

          </el-avatar>
        </div>
        <div style="float: left;margin-top: 20px;margin-left: 5px;width: 75%">
          <span style=" ">{{ comment.user_info.username }}</span>
          <hr>
          <!--     comment.id 为评论id，     -->
          <p><span @click="get_comment_id(comment.id,comment.user_info.username)">{{
              comment.content
            }}</span></p>


          <br>


          <div
              style="background: #f3f1f1;width: 90%;border:1px #5970fd dashed;margin-left: 5%;padding: 5px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;"
              v-show="listfilter(comment.id,comment_son)">
            <span v-for="son in listfilter(comment.id,comment_son)"
                  @click="get_son_comment(comment,listfilter(comment.id,comment_son))"> {{
                son.user_info.username
              }}:{{ son.content }}<br><span v-for="son_son in listfilter(son.id,comment_son)">
              {{ son_son.user_info.username }}回复{{ son.user_info.username }}:{{ son_son.content }}
            </span></span>

          </div>


          <div>
            <span style="float: left">{{ comment.time }}</span>
            <span style="float: right " :v-model="res=getlikes(comment.likes,user_id)">
              <van-icon :id="comment.id" :name="icon_list[comment_list.indexOf(comment)][comment.id]"
                        @click.once="likes_change(comment.likes,user_id,comment.id)"/>
              {{ res }}

            </span>
          </div>

          <br>


        </div>

      </div>

      <van-empty description="暂无更多评论" image-size="50px"/>


      <div>

      </div>


    </div>

    <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
    />
    <van-action-sheet v-model="show" title="简介" style="height: 50%;">
      <div class="content">
        <div>

          <h1>{{ comic_data.name }}</h1>
          <span>年份：{{ detail.yser }}</span>
          <br>
          <span>主要角色：{{ detail.role }}</span>
          <br>
          <span>主要剧情：{{ detail.introduction }}</span>
        </div>
      </div>
    </van-action-sheet>
    <van-tabbar v-show="active==1">
      <van-cell-group>
        <van-field placeholder="写条评论一起互动吧" round @click="if_login" readonly/>
      </van-cell-group>
      <!--      回复评论-->
    </van-tabbar>
    <van-action-sheet v-model="all_son_show" title="详情" style="height: 60%">
      <div class="content">
        <!--    评论内容-->
        <div style="width: 100%;height: 100px">
          <div style="margin: 5px;float: left;width: 10%;height: 100px">
            <el-avatar :src="comment_user.icon" style="margin: 5px;max-height: 150px">

            </el-avatar>
          </div>
          <div style="float: left;margin-top: 10px;margin-left: 10px;width: 70%">
            <span style=" ">{{ comment_user.username }}</span>
            <hr>
            <!--     comment.id 为评论id，     -->
            <span>{{ comment_all.content }}</span><br>
            <span>{{ comment_all.time }}</span>


          </div>
        </div>
        <br>
        <van-divider dashed>评论</van-divider>
        <!--   所有子评论-->
        <div v-show="son_comment_list" style="height: 80px;width: 100%">
          <div v-for="son_comment in son_comment_list" style="width: 100%;">

            <div style="width: 100%;">
              <!--              头像-->
              <div style="float: left;width: 15%;">
                <el-avatar :src="son_comment.user_info.icon" style="margin: 5px">
                </el-avatar>
              </div>
              <div>
                <span style="font-size: 12px"> {{ son_comment.user_info.username }}</span>
                <van-tag round type="primary" v-show="(comment_user.username)==(son_comment.user_info.username)"
                         size="12px">楼主
                </van-tag>
                <br>
                <span style="font-size: 12px" @click="get_comment_id(son_comment.id,son_comment.user_info.username)"> {{
                    son_comment.content
                  }}</span>
                <br>
                <span style="font-size: 12px">{{ son_comment.time }}</span>
                <!--                子评论的子评论-->
                <div style="width: 100%;border: 1px white solid;padding-left: 20px;margin-top: 5px"
                     v-for="son_son_son in listfilter(son_comment.id,comment_son)">
                  <div style="height: 50px;width: 100%">
                    <div style="float: left;width: 15%;">
                      <el-avatar :src="son_son_son.user_info.icon" style="margin: 5px">

                      </el-avatar>
                    </div>
                    <div>
                                <span style="font-size: 10px">
                        {{ son_son_son.user_info.username }}<van-tag round type="primary"
                                                                     v-show="(comment_user.username)==(son_son_son.user_info.username)"
                                                                     size="12px">楼主</van-tag>回复{{
                                    son_comment.user_info.username
                                  }}<van-tag round type="primary"
                                             v-show="(comment_user.username)==(son_comment.user_info.username)"
                                             size="12px">楼主</van-tag>:

                      </span><br>
                      <span style="font-size: 10px">{{ son_son_son.content }}</span><br>
                      <span style="font-size: 10px">{{ son_son_son.time }}</span>
                    </div>
                  </div>
                </div>


              </div>
            </div>

            <van-divider/>
          </div>


        </div>

      </div>
    </van-action-sheet>
    <van-action-sheet v-model="comment_son_show" title="回复">

      <div class="content">
        <van-field
            v-model="message2"
            rows="2"
            autosize
            type="textarea"
            maxlength="30"
            :placeholder="'回复 @'+comment_username"
            show-word-limit
        />
      </div>
      <van-button block round color="#7232dd" plain @click="pushbackComment(comment_id)">发表</van-button>
    </van-action-sheet>
    <van-action-sheet v-model="comment_show" title="评论">
      <div class="content">
        <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入评论内容"
            show-word-limit
        />
      </div>
      <van-button block round color="#7232dd" plain @click="pushComment">发表</van-button>
    </van-action-sheet>

  </div>

</template>

<script>
import {videoPlayer} from 'vue-video-player';
import {Toast} from "vant";

export default {
  name: "ComicDetail",
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        sources: [{ // 播放资源和资源格式
          type: "video/mp4",
          // src: "https://video.pearvideo.com/mp4/short/20170616/cont-1094945-10544594-hd.mp4" //你的视频地址（必填）
          src: 'http://rf7xdyiqv.bkt.clouddn.com/%E5%90%8D%E4%BE%A6%E6%8E%A2%E6%9F%AF%E5%8D%971000.mp4'
        }],
      },
      active: 0,
      likes_active: 0,
      showShare: false,
      comment_list: [],
      isLoad: true,
      user_id: '',
      message2: '',
      comment_son: [],
      all_son_show: false,
      comment_show: false,
      comment_son_show: false,
      message: '',
      comment_username: '',
      options: [
        [
          {name: '微信', icon: 'wechat'},
          {name: '朋友圈', icon: 'wechat-moments'},
          {name: '微博', icon: 'weibo'},
          {name: 'QQ', icon: 'qq'},
        ],
        [
          {name: '复制链接', icon: 'link'},
          {name: '分享海报', icon: 'poster'},
          {name: '二维码', icon: 'qrcode'},
          {name: '小程序码', icon: 'weapp-qrcode'},
        ],
      ],
      list: [],
      type_list: ['推荐', '恋爱', '运动', '推理', '恐怖', '古风', '亲子', '科幻'],
      loading: false,
      finished: false,
      refreshing: false,
      comic_data: {},
      course_id: '',
      show: false,
      detail: {},
      go_new: [],
      comment_id: '',
      comment_all: {},
      comment_user: {},
      son_comment_list: [],
      icon_list: []

    }
  },
  methods: {
    likes_change(dict, user_id, commentid) {

      if (localStorage.getItem('username') === null) {
        Toast('您为登录，请先登录')
      } else {
        if (dict == null) {
          //  创建
          this.$axios.post(`${this.$settings.base_url}comic/likes/`, {
            user: [user_id],
            commentpk: commentid
          }).then(res => {
            this.getcoment()
            for (let i in this.icon_list) {
              for (let l in this.icon_list[i]) {
                if (l == commentid) {
                  this.icon_list[i][l] = 'good-job'

                }
              }

            }
          }).catch(res=>{
            Toast('只能点赞一次！')
          })
        } else {
          let comment_id = dict.id
          let new_user = dict.user
          new_user.push(user_id)
          this.$axios.post(`${this.$settings.base_url}comic/likes/${comment_id}/`).then(res => {
            Toast('点赞成功')
            for (let i in this.icon_list) {
              for (let l in this.icon_list[i]) {
                if (l == comment_id) {
                  this.icon_list[i][l] = 'good-job'
                }
              }
            }
          })


        }
      }


    },
    listfilter(id, list) {
      let newlist = []
      newlist = list.filter(x => {
        return x.parent == id
      })
      if (newlist.length < 1) {

        return false
      } else {

        return newlist
      }
    },
    getlikes(dict, userid) {
      if (dict == null) {
        return 0
      } else {
        if (dict.user.indexOf(userid) > 0) {
          this.likes_active = 1
        }
        return dict.user.length
      }


      return 0
    },
    if_login() {
      if (localStorage.getItem('username')===null) {
        Toast('您还问登录，请先登录')
      } else {
        this.comment_show = true
      }


    },
    onClickLeft() {
      this.$router.back()
    },
    onPlayerPlay() {
    },
    onPlayerPause() {
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    get_course_id() {
      // 获取地址栏上面的课程ID
      this.course_id = this.$route.params.pk || this.$route.query.pk;
      if (this.course_id < 1) {
        let _this = this;
        _this.$alert("对不起，当前视频不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          }
        });
      }
      // console.log(this.course_id)
    },
    get_son_comment(comment, son_comment) {
      if (localStorage.getItem('username')=== null) {
        Toast('您还问登录，请先登录')
      } else {
        this.comment_user = comment.user_info
        this.comment_all = comment
        this.son_comment_list = son_comment
        this.all_son_show = true
      }
    },
    get_comment_id(val, val2) {
      if (localStorage.getItem('username')=== null) {
        Toast('您还问登录，请先登录')
      } else {
        this.comment_son_show = true;
        this.comment_id = val
        this.comment_username = val2
      }


    },
    getcoment() {
      this.$axios.get(`${this.$settings.base_url}comic/comment/?comic=${this.course_id}`).then(res => {
        this.comment_son = res.data.filter(x => {
          return x.parent != null
        })
        this.comment_list = res.data.filter(x => {
          return x.parent == null
        })
        for (let item of this.comment_list) {
          let id = item.id
          let temp = {}
          temp[id] = 'good-job-o'
          this.icon_list.push(temp)
        }
        console.log(this.icon_list)


      })
    },
    async get_data() {
      await this.$axios.get(`${this.$settings.base_url}comic/comiclist/${this.course_id}/`).then(res => {
        this.comic_data = res.data
        // console.log(this.course_id)
        this.detail = res.data.comic_detail

        // console.log(res.data)
      })
    },
    //  发表评论
    pushComment() {
      let comment_dict = {
        user: localStorage.getItem('id'),
        comic: this.course_id,
        content: this.message,
      }
      this.comment_show = false
      this.$axios.post(`${this.$settings.base_url}comic/comment/`, comment_dict).then(res => {
        this.getcoment()

        this.message = ''


      }).catch(x => {
        Toast.fail('发表内容不能为空');
      })
    },
    pushbackComment(val) {
      let comment_dict = {
        user:localStorage.getItem('id'),
        comic: this.course_id,
        content: this.message2,
        parent: val
      }
      this.$axios.post(`${this.$settings.base_url}comic/comment/`, comment_dict).then(res => {
        this.getcoment()
        this.comment_son_show = false
        this.message2 = ''
      }).catch(x => {
        Toast.fail('发表失败，请联系管理员');
      })
    }
  },
  created() {
    this.get_course_id()
    this.get_data()
    // console.log(this.comic_data)
    this.getcoment()
    this.user_id = localStorage.getItem('id')
    this.$axios.post(`${this.$settings.base_url}comic/num/`,{
      comic:this.course_id,
      num:this.course_id
    }).catch(res=>{
      Toast("系统问题故障，请联系管理员")
    })


  },
  components: {
    videoPlayer,
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 200px;
}

.body {
  margin: 0 auto;
}

.content {
  padding: 16px 16px 160px;
}

</style>